<template>
  <div class="model-management">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="抽象元素管理" name="abstractElement">
        <abstract-element />
      </el-tab-pane>
      <el-tab-pane label="数据元素管理" name="dataElement">
        <data-element />
      </el-tab-pane>
      <el-tab-pane label="业务模型管理" name="businessModel">
        <business-model />
      </el-tab-pane>
      <el-tab-pane label="业务模型属性管理" name="businessModelAttribute">
        <business-model-attribute />
      </el-tab-pane>
      <el-tab-pane label="逻辑模型管理" name="logicalModel">
        <logical-model />
      </el-tab-pane>
      <el-tab-pane label="逻辑模型属性管理" name="logicalModelAttribute">
        <logical-model-attribute />
      </el-tab-pane>
      <el-tab-pane label="物理模型管理" name="physicalModel">
        <physical-model />
      </el-tab-pane>
      <el-tab-pane label="物理模型属性管理" name="physicalModelAttribute">
        <physical-model-attribute />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="ModelManagement">
import { ref } from "vue";
import AbstractElement from "./abstractElement/index.vue";
import DataElement from "./dataElement/index.vue";
import BusinessModel from "./businessModel/index.vue";
import BusinessModelAttribute from "./businessModelAttribute/index.vue";
import LogicalModel from "./logicalModel/index.vue";
import LogicalModelAttribute from "./logicalModelAttribute/index.vue";
import PhysicalModel from "./physicalModel/index.vue";
import PhysicalModelAttribute from "./physicalModelAttribute/index.vue";

const activeTab = ref("abstractElement");
</script>

<style scoped lang="scss">
.model-management {
  min-height: 100vh;
  padding: 10px;
  background: var(--el-bg-color-page);
}
</style>
